// 使用记录
<template>
    <f7-page
        ptr
        @ptr:refresh="refresh"
        infinite
        :infinite-distance="50"
        :infinite-preloader="true"
        @infinite="infinite"
        class="common-page"
    >
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>使用记录</f7-nav-title>
            <f7-nav-right></f7-nav-right>
        </f7-navbar>
        <f7-list media-list class="search-list" v-if="engineeList.length > 0">
            <li
                v-for="(item, index) in engineeList"
                :key="index"
                @click="detail(item)"
                class="content-box"
            >
                <img
                    :src="require(`../../../../assets/img/qzjx/use-icon.png`)"
                    alt=""
                    class="left-box"
                />
                <div class="right-box">
                    <div class="title-box">
                        <h3>
                            {{ item.beginTime | date('yyyy-MM-dd') }} ——
                            {{ item.endTime | date('yyyy-MM-dd') || '至今' }}
                        </h3>
                    </div>
                    <p>用于工程：{{ item.engineeName || '--' }}</p>
                </div>
            </li>
        </f7-list>
        <v-empty v-else description="暂无数据" />
    </f7-page>
</template>

<script>
import controller from '@/libs/framework/controller'
export default class instance extends controller {
    onBeforeInit() {
        this.urls = {
            query: '/app/equipment/eqmProperty/getEngineeList',
        }
    }
    onInit() {
        this.setSearch('propertyId', this.$f7route.query.propertyId, 'list')
    }

    onBeforeQuery(type, conditions, params) {}

    onAfterQuery(type, isSuccess, result) {
        if (type == 'list' && isSuccess) {
            this.$data.engineeList = result.parameters.engineeList
        }
        return result
    }

    mixin() {
        return {
            data() {
                return {
                    engineeList: [],
                }
            },
            methods: {
                // 详情
                detail(item) {
                    this.$f7router.navigate(
                        `/business/qzjx/equipment/detail?groupId=${item.groupId}&propertyId=${item.propertyId}`
                    )
                },
            },
            mounted() {},
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/commonPage.less');
@{deep}.page-content{
    background: #F7F9FC;
}
.content-box{
    background: #FFFFFF;
    box-shadow: none;
}
.common-page @{deep}.van-tabs {
    .van-tabs__wrap {
        width: 100%;
        z-index: 99;
    }

    .van-tabs__line {
        width: 40px;
    }
}
.content-box .right-box p{
    font-size: 14px;
    margin-top: 8px;
}
.submit-btn {
    flex: 1;
    margin: 0 10px;
    border-radius: 24px;
}
</style>
